<template>
	<scroll-view scroll-y @scrolltolower="handleAbnumImg" class="scroll_view">
		<view class="home-abnum">
			<swiper :indicator-dots="true" :autoplay="true" autoplay indicator-dots circular :interval="3000" :duration="1000">
				<swiper-item v-for="(item,index) in banner" :key="item.id">
					<view class="swiper-item">
						<go-detail :list="banner" :index="index">
							<image :src="item.thumb" mode="aspectFill"></image>
						</go-detail>
					</view>
				</swiper-item>
			</swiper>
			<view class="abnum_content">
					<navigator class="abnum_lsit" v-for="(item,index) in album"  :url="'/pages/abnumdetail/index?id=' + item.id">
							<view class="abnummsg">
									<view class="abnumImg">
										<image :src="item.cover" mode="aspectFill" ></image>
									</view>
									<view class="abnumTxt">
										<text>{{item.name}}</text>
										<view class="detailTxt">
											{{item.desc}}
										</view>
										<view class="button">
											+ 关注
										</view>
									</view>
							</view>
					</navigator>
			</view>
		</view>
	</scroll-view>
	
</template>

<script>
	import 	goDetail from '../../commpoent/goDetail.vue'
	export default{
		components:{
			goDetail
		},
		data(){
			return{
				// 请求专辑参数
				params:{
					limit:30,
					order:'new',
					skip:0
				},
				// 轮播图数据
				banner:[],
				// 列表数据
				album:[],
				haveMore:true
			}
		},
		mounted(){
			uni.setNavigationBarTitle({
				title:'专辑'
			})
			this.getList()
		},
		methods:{
			getList(){
				this.request({
					url:'http://157.122.54.189:9088/image/v1/wallpaper/album',
					data:this.params
				})
				.then(res =>{
					if(res.data.res.album.length === 0){
						uni.showToast({
							title:'没有更多了',
							icon:'none'
						})
						 this.haveMore = false
						return
					}
					if(this.banner.length === 0){
						this.banner = res.data.res.banner
					}
					 this.album = [...this.album,...res.data.res.album]
				})
			},
			handleAbnumImg(){
				if(this.haveMore){
					this.params.skip = this.params.skip + 30
					this.getList()
				}
			},
			toAbnumDetail(id){
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.scroll_view{
		height: calc(100vh - 36px);
	}
	.home-abnum{
		swiper{
			height: calc(750rpx / 2.3);
			.swiper-item{
				image{
					width: 100%;
					height: 320rpx;
				}
			}
		}
		.abnum_content{
			.abnum_lsit{
				padding: 10rpx;
				border-bottom: 1rpx solid #ccc;
				.abnummsg{
					display: flex;
					justify-content: space-around;
					.abnumImg{
						flex: 1;
						padding: 10rpx;
						image{
							width: 200rpx;
							height: 200rpx;
						}
					}
					.abnumTxt{
						padding: 0 10rpx;
						flex: 2;
						overflow: hidden;
						position: relative;
						text{
							font-weight: 600;
							font-size: 32rpx;
							color: $color;
							margin-left: 30rpx;
						}
						.detailTxt{
							font-size: 26rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							word-break: break-all;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 3; 
					
						}
						.button{
							border: 3rpx solid $color;
							width:140rpx;
							height: 30rpx;
							color: $color;
							line-height: 30rpx;
							text-align: center;
							border-radius: 5%;
							padding: 10rpx;
							position: absolute;
							top:150rpx;
							right: 20px;
						}
					}
				}
				
			}
		}
		
	}
</style>
